<template>
  <ContentWrap title="用户操作记录配置">
    <div class="app-container">
      <Search
        ref="search"
        :schema="schema"
        :model="queryParam"
        :is-col="false"
        layout="inline"
        :showSearch="true"
        button-position="left"
        :search-loading="loading"
        :reset-loading="loading"
        @search="handleSearch"
        @reset="handleSearch"
      >
        <template #opts>
          <el-button type="success" @click="addMenu">添加记录的操作</el-button>
        </template>
      </Search>
    </div>
    <Table :data="dataList" :columns="columns" row-key="Id" :pagination="paging" @change="load">
      <template #IsEnable="e">
        <el-switch
          v-model="e.row.IsEnable"
          active-text="启用"
          inactive-text="停用"
          @change="setState(e.row)"
        />
      </template>
      <template #BusType="e">
        {{ busType[e.row.BusType] }}
      </template>
      <template #action="e">
        <BaseButton
          v-if="!e.row.IsEnable"
          size="small"
          type="danger"
          title="删除操作菜单"
          :icon="dropIcon"
          circle
          @click="drop(e.row)"
        />
      </template>
    </Table>
    <addOpMenu v-model:visible="visible" @close="close" />
  </ContentWrap>
</template>

<script>
import * as opMenuApi from '@/api/opt/opMenu'
import { GetItemName } from '@/api/base/dictItem'
import { HrItemDic } from '@/config/publicDic'
import { Table } from '@/components/Table'
import { Search } from '@/components/Search'
import { useIcon } from '@/hooks/web/useIcon'
import addOpMenu from './addOpMenu.vue'
export default {
  components: {
    Search,
    Table,
    addOpMenu
  },
  data() {
    return {
      loading: false,
      dropIcon: useIcon({ icon: 'ep:delete' }),
      schema: [
        {
          field: 'QueryKey',
          label: '关键字',
          component: 'Input',
          componentProps: {
            placeholder: '权限功能说明'
          }
        },
        {
          field: 'BusType',
          label: '业务类型',
          component: 'DicItem',
          componentProps: {
            dicId: HrItemDic.OperateBusType,
            placeholder: '业务类型'
          }
        }
      ],
      dataList: [],
      visible: false,
      id: null,
      columns: [
        {
          field: 'Title',
          label: '权限功能说明',
          align: 'center',
          width: 200
        },
        {
          field: 'BusType',
          label: '业务类型',
          align: 'center',
          slotName: 'BusType',
          width: 150
        },
        {
          field: 'IsEnable',
          label: '是否启用',
          align: 'center',
          slotName: 'IsEnable',
          width: 150
        },
        {
          field: 'RoutePath',
          label: '路由路径',
          align: 'left',
          minWidth: 300
        },
        {
          field: 'Action',
          label: '操作',
          align: 'left',
          width: '100px',
          slotName: 'action'
        }
      ],
      paging: {
        pageSize: 20,
        total: 0,
        currentPage: 1
      },
      busType: {},
      queryParam: {
        QueryKey: null,
        BusType: null
      }
    }
  },
  computed: {},
  mounted() {
    this.loadItem()
    this.load()
  },
  methods: {
    close(isRefresh) {
      if (isRefresh) {
        this.load()
      }
    },
    handleSearch(data) {
      this.queryParam.QueryKey = data.QueryKey
      this.queryParam.BusType = data.BusType
      this.load()
    },
    async setState(row) {
      await opMenuApi.SetIsEnable(row.Id, row.IsEnable)
      this.$message({
        type: 'success',
        message: '保存成功!'
      })
    },
    addMenu() {
      this.visible = true
    },
    drop(row) {
      const title = '确认删除权限 ' + row.Title + '?'
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitDrop(row.Id)
      })
    },
    async submitDrop(id) {
      await opMenuApi.Delete(id)
      this.load()
    },
    async loadItem() {
      this.busType = await GetItemName(HrItemDic.OperateBusType)
    },
    async load(curPaging) {
      if (curPaging == null) {
        curPaging = {
          Size: this.paging.pageSize,
          Index: 1,
          SortName: 'Id',
          IsDesc: true
        }
        this.paging.currentPage = 1
      }
      const res = await opMenuApi.Query(this.queryParam, curPaging)
      if (res.List) {
        this.dataList = res.List
      } else {
        this.dataList = []
      }
      this.paging.total = res.Count
    },
    reset() {
      this.queryParam.QueryKey = null
      this.queryParam.BusType = null
      this.load()
    }
  }
}
</script>
